<template>
    <div ref="lotHeader">
        <!-- 玩法选项卡 -->
        <lot-play-tab v-show="$store.state.lotPlayTab"></lot-play-tab>
        <!-- 信息菜单 -->
        <lot-menu v-show="$store.state.lotMenu"></lot-menu>
        <!-- 玩法提示框 -->
        <description v-if="$store.state.lotDesc"></description>
        <!-- header -->
        <div class="m-header flex-box flex-ac flex-pj">
            <div class="flex-box flex-ac he-fv" @click="winclose">
                <div class="arrow_left_s arrow_left_i"></div>
            </div>
            <div class="flex-box flex-ac" @click="togTab">
                <h1 class="text">{{ $store.state.lotTitle }}</h1>
                <div class="arrow_s" :class="{
                    'arrow_up' : $store.state.lotPlayTab,
                    'arrow_down' : !$store.state.lotPlayTab,
                }"></div>
            </div>
            <div class="flex-box flex-ac he-fv" @click="openMenu">
                <div class="icon_menu"></div>
            </div>
        </div>
        <!-- 期数、倒计时、历史数据 -->
        <lot-overview></lot-overview>
        <!-- 提示 -->
        <div class="flex-box flex-ac flex-pe">
            <div class="iconSize-1 icon_prompt marr-25"></div>
            <div class="tx-s-14 tx-c-666 mar-r-5" @click="showDesc()">玩法提示</div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import LotPlayTab from './lotPlayTab'
import LotMenu from './lotMenu'
import Description from "./description"
import LotOverview from "./lotOverview"
export default {
    created () {
        this.$store.state.lotPlayTab = false
    },
    methods: {
        winclose () {
            this.$router.go(-1)
        },
        // 打开玩法提示
        showDesc () {
            this.$store.state.lotDesc = true
        },
        // 切换tab
        togTab () {
            this.$store.state.lotPlayTab = !this.$store.state.lotPlayTab
        },
        // 打开菜单
        openMenu () {
            this.$store.state.lotPlayTab = false
            this.$store.state.lotMenu = !this.$store.state.lotMenu
        }
    },
    components : {
        LotPlayTab,
        LotMenu,
        Description,
        LotOverview
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable" 
    .m-header
        background: $color-r
        position: relative
        height: 2.75rem
        text-align: center
        color: white
    .arrow_left_s
        width: .75rem
        height: 1.25rem
        margin: 0 1rem 
        background-size: 100% 100%
    .arrow_s
        width: 1.25rem
        height: .75rem 
        background-size: 100% 100%
    .arrow_left_i
        background-image: url('../../common/image/arrow_left.png') 
    .arrow_up
        background-image: url('../../common/image/arrow_whiteup.png')
    .arrow_down 
        background-image: url('../../common/image/arrow_whitedown.png')
    .text
        display: inline-block
        vertical-align: top
        line-height: 2.75rem
        font-size: $fonts-18 
    .icon_menu
        width: 1.25rem; 
        height: 1.25rem; 
        margin: 0 .75rem;
        background-repeat: no-repeat
        background-size: 100% 100%
        background-image: url('../../common/image/menu.png')
    .marr-25
        margin-right : .25rem
</style>